// --------------------------------------------------
// variables
// --------------------------------------------------
$grey-darker: #262626;
$grey-dark: #2d2d2d;
$grey: #383838;
$grey-light: #444;
$grey-lighter: #5c5c5c;
$color-inverted: #fff;
// typography
$text-color: $grey-lighter;
// table
$table-border-color: $grey-dark;
$table-head-bg-color: #242424;
$table-striped-bg-color: #242424;
$table-hover-bg-color: #242424;
// form
$input-bg-color: #353535;
$input-bg-color-focus: darken($input-bg-color, 5%);
$input-border-color: #404040;
$input-border-color-focus: darken($input-border-color, 5%);
$input-text-color: #fff;
// boxes
$box-bg-color: #1a1a1a;
$box-border-color: $grey-dark;
$box-heading-bg-color: #242424;
$box-footer-bg-color: #242424;
$boxes-rasied-shadow: rgba(0, 0, 0, .175);

// --------------------------
// Theme-dark
// --------------------------
.theme-dark {
  background-color: #212121;
  color: $text-color;

  body {
    background-color: #212121;
    color: $text-color;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #fff;
  }

  .table {
    > thead,
    > tbody,
    > tfoot {
      > tr {
        > th,
        > td {
          border-color: $table-border-color;
        }
      }
    }

    > thead,
    > tfoot {
      background-color: $table-head-bg-color;
    }

    &.bordered {
      border-color: $table-border-color;

      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            border-color: $table-border-color;
          }
        }
      }
    }

    &.striped {
      > tbody > tr:nth-of-type(2n+2) {
        background-color: $table-striped-bg-color;
      }
    }

    &.hover {
      > tbody > tr:hover {
        background-color: $table-hover-bg-color;
      }
    }
  }

  .form-control {
    border-color: $input-border-color;
    background-color: $input-bg-color;
    color: $input-text-color;

    &:focus {
      background-color: $input-bg-color-focus;
      border-color: $input-border-color-focus;
    }
  }

  .box {
    border-color: $box-border-color;
    background-color: $box-bg-color;
  }

  .boxes {
    > .box {
      &.box-header {
        background-color: $box-heading-bg-color;
      }

      &.box-footer {
        background-color: $box-footer-bg-color;
      }
    }

    &.raised {
      border-color: $box-bg-color;
      box-shadow: 0 5px 30px 2px $boxes-rasied-shadow;
      > .box {
        border-color: darken($box-border-color, 5%);
      }
    }

    &.default {
      border-color: $box-border-color;
    }

    &.inverted {
      border-color: $color-inverted;
    }

    &.secondary {
      > .box {
        &.box-header {
          background-color: transparent;
        }

        &.box-footer {
          background-color: transparent;
        }
      }
    }
  }
}
